<template>
    <div class="app-container">
      数据表单
       <el-form label-width="120px">
        <el-form-item label="影评">
          <el-input v-model="information.sentence"/>
        </el-form-item>

        <el-form-item label="字符串令牌">
          <el-input v-model="information.tokens"/>
        </el-form-item>

        <el-form-item label="标签">
          <el-input v-model="information.label"/>
        </el-form-item>
        <el-form-item label="句法生成树">
          <el-input v-model="information.tree" :rows="10" type="textarea"/>
        </el-form-item>

        <el-form-item>
          <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
        </el-form-item>
      </el-form>
  
    </div>
  </template>
  <script>
  import informationApi from '@/api/edu/sst'
  export default {
    data() {
      return {
        value: '',
        information:{},
        saveBtnDisabled:false  // 保存按钮是否禁用,
      }
    },
    created() { //页面渲染之前执行
      this.init()
    },
    watch: {  //监听
      $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
        this.init()
      }
    },
    methods:{
      init() {
        //判断路径有id值,做修改
        if(this.$route.params && this.$route.params.id) {
            //从路径获取id值
            const id = this.$route.params.id
            //调用根据id查询的方法
            this.getInfo(id)
        } else { //路径没有id值，做添加
          //清空表单
          this.information = {}
        }
      },
      //根据信息id查询的方法
      getInfo(id) {
        informationApi.getInformationInfo(id)
          .then(response => {
            this.information = response.data
            console.log(this.information)
          })
      },
      saveOrUpdate() {
        //判断修改还是添加
        //根据路由是否有id
        if(!this.information.id) {
          //添加
          this.saveInformation()
        } else {
          //修改
          this.updateInformation()
        }
      },
      //修改数据的方法
      updateInformation() {
        informationApi.updateInformationInfo(this.information.id,this.information)
          .then(response => {
            //提示信息
            this.$message({
                type: 'success',
                message: '修改成功!'
            });
            //回到列表页面 路由跳转
            this.$router.push({path:'/nested/menu2'})
          })
      },
      //添加数据的方法
      saveInformation() {
        informationApi.addInformation(this.information)
          .then(response => {//添加成功
            //提示信息
            this.$message({
                type: 'success',
                message: '添加成功!'
            });
            //回到列表页面 路由跳转
            this.$router.push({path:'/nested/menu2'})
          })
      }
  
    }
  }
  </script>
  